<template>
	
	<view >
		<view class="head">
			<view class="header-wrap">
				<view class="index-header">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<text class="address" style="color:#FFFFFF;"><text class="curposition_icon iconfont" style="font-size: 38rpx;">&#xe6a2;</text><text  class="curposition">{{curPosition}}</text></text>
						<text class="map-wrap iconfont" @click="rightClick" style="color:#FFFFFF;font-size: 32rpx;">&#xe6ab;</text>
					</view>
				</view>
				<view class="input-wrap">
					<input type="text" 
						   placeholder="热门产品"
						   @input="inputChange" @confirm="search()" placeholder-style="font-size:28rpx;"/>
					<text class="iconfont" @tap="search()">&#xe678;</text>
				</view>
			</view>
			<view class="blank"></view>
	
		</view>
		<!-- 轮播图 -->
		<view class="bgbule" style="padding-top: 130rpx;">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="mx-3 " style="height: 345upx;">
			<block v-for="(item,index) in banners" :key="index">
				<swiper-item>
					<view @tap="togoodinfo(item.p_id)" class="swiper-item" ><image :src="baseUrl+item.img" style="height: 395upx;border-radius: 20rpx;"></image></view>
				</swiper-item>
			</block>
		</swiper>
		</view>
		<!-- 通知栏 -->
		<view class="d-flex px-3 a-center" style="height: 106upx;">
			<image src="../../static/laba.png" style="width: 40upx;height: 36upx;"></image>
			<swiper :autoplay="true" :interval="3000" :duration="1000" :vertical="true" style="height:40upx;width:660upx;">
				<block v-for="(item,index) in announcements" :key="index">
					<swiper-item style="height:40upx;line-height:40upx;">
						<text @tap="toannouncementinfo(item.id)" class="mx-2">{{item.title}}</text>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="row j-sb m-2 ">
			
			<block v-for="(item,index) in resdata" :key="index">
				<view class="span-4 d-flex flex-column j-center a-center py-1"
				@tap="topage(item,index)">
					<image :src="item.src" 
					style="width: 100upx;height: 70upx;"
					mode="widthFix"></image>
					<text class="font-sm">{{item.text}}</text>
				</view>
			</block>
			
		</view>
		
		<view class="w-100 py-1" style="background-color: #f6f6f6;">
			
		</view>
		
		<view class="p-3" style="padding-bottom: 140rpx;" >
			<view class="row j-sb">
				<text class="font-lg font-weight">套餐推荐</text>
				<navigator open-type="switchTab" url="/pages/goods/goods" class="row a-center"><text class="px-1 font">全部</text> <image src="../../static/r-cli.jpg" style="width: 46upx;height: 42upx;"></image></navigator>
			</view>
			<view class="row w-100 j-sb">
				<block v-for="(item,index) in goods" :key="index">
				<view @tap="togoodinfo(item.id)" class="my-1" style="width: 332upx;height: 430upx;background-color: #f6f6f6;border-radius: 10rpx 10rpx 0 0;overflow: hidden;position: relative;">
					<image :src="baseUrl+item.img" style="height: 244upx;"></image>
					<view class="p-2 ">
						<view style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
							{{item.title}}
						</view>
						<view class="row j-sb font-md a-center main-text-color" style="padding: 0 20rpx;position: absolute;bottom: 20rpx;">
							<text><text class="font-sm font-a">￥</text>{{item.price}}</text>
							<!-- <image @tap.stop="addcar(index)" src="../../static/tabbar/car.png"  style="width: 38upx;height: 30upx;"></image> -->
						</view>
					</view>
				</view>
				
				</block>
				
			</view>
			<!-- <view class="row j-sb text-center" style="height: 68upx;">
				<view @tap="changegoods()" class=" main-bg-color-hui" style="width: 330upx;height: 70upx;border-radius: 35upx;line-height: 70upx;">
					换一组
					
				</view>
				<navigator open-type="switchTab" url="../goods/goods" class=" main-bg-color-hui" style="width: 330upx;height: 68upx;border-radius: 35upx;line-height: 70upx;">
					查看更多
					
				</navigator>
			</view> -->
		</view>
	</view>
	
	
</template>

<script>
	import request from '@/common/lib/request.js'
	import qqmapsdk from '@/common/lib/qqmap-wx-jssdk.js'
	const QQMapWX = new qqmapsdk({
		key: 'GIJBZ-BGCRP-EMFDH-VEOP2-LB23S-YEB6P'
	});
	export default {
		data() {
			return {
				carts: [],
				keyword:'',
				curPosition:'正在获取定位...',
				latitude:'30.5445216900',
				longitude:'114.2454528800',
				page:1,
				baseUrl:request.common.baseUrl,
				title: 'Hello',
				banners:[],
				announcements:[],
				resdata:[{
					src:'../../static/cate01.jpg',
					text:'了解我们',
					to:'/pages/intro/intro'
				},
				{
					src:'../../static/cate02.jpg',
					text:'健康资讯',
					to:'/pages/counsel/counsel'
				},
				{
					src:'../../static/cate03.jpg',
					text:'热门产品',
					tab:'/pages/goods/goods'
				},
				{
					src:'../../static/cate04.jpg',
					text:'线下门店',
					to:"/pages/CheckUp/CheckUp"
				}],
				goods:[]
			}
		},
		onShow() {
			this.getMyCarts()
		},
		onLoad: function (option) {
			// uni.setStorageSync('keyToken','')
				// uni.setStorageSync('keyOpenid','oejfCjlTV459uk9N9hCuA5_nUDrM')
			uni.setNavigationBarTitle({
			    title: '谷雨颐嘉'
			});
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					uni.setStorageSync('keyLatitude',res.latitude)
					uni.setStorageSync('keyLongitude',res.longitude)
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					uni.request({
					    url: request.common.baseUrl+'/api/access/wxPosition',
					    data: {
							location:this.latitude+','+this.longitude
						},
					    header: {
							'Content-Type':'application/json;charset=UTF-8',
							'Content-Type':'application/x-www-form-urlencoded'
					    },
					    success: (res) => {
					        if(res.data.code==200){
								this.curPosition=res.data.data.result.ad_info.city+res.data.data.result.ad_info.district
								uni.setStorageSync('curPosition',this.curPosition)
							}
					    }
					});
				},
				fail: () => {
					
				},
				complete: (resc) => {
					// 解析地址
					// QQMapWX.reverseGeocoder({
					// 	location: {
					// 		latitude: this.latitude,
					// 		longitude: this.longitude
					// 	},
					// 	success: function(mres) {
					// 		console.log("解析地址成功");
					// 		console.log(mres);
					// 		// 省
					// 		let province = mres.result.ad_info.province;
					// 		// 市
					// 		let city = mres.result.ad_info.city;
					// 		console.log(province);
					// 		console.log(city);
					// 		uni.showToast({
					// 			title: '解析成功'+province+city,
					// 			icon: 'success',
					// 			duration: 4000
					// 		});
					// 	},
					// 	fail: function(mres) {
					// 		uni.showToast({
					// 			title: this.latitude+'解析失败'+this.longitude,
					// 			duration: 3000,
					// 			icon: "none"
					// 		})
					// 		console.log(mres);
					// 	},
					// 	complete: function(mres) {
					// 		console.log(mres);
					// 		uni.showToast({
					// 			title: '解'+mres.status+'析'+mres.message,
					// 			duration: 3000,
					// 			icon: "none"
					// 		})
					// 	}
					// })
				}
			});
			uni.request({
			    url: request.common.baseUrl+'/api/index/banner',
			    data: {},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
			        if(res.data.code==200){
						this.banners=res.data.data
					}
			    }
			});
			uni.request({
			    url: request.common.baseUrl+'/api/index/announcement',
			    data: {},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
			        if(res.data.code==200){
						this.announcements=res.data.data
					}
			    }
			});
			uni.request({
			    url: request.common.baseUrl+'/api/index/productFlag',
			    data: {
					page:this.page
				},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
			        if(res.data.code==200){
						this.goods=res.data.data
					}
			    }
			});
		},
		methods: {
			inputChange: function (e) {
				this.keyword=e.detail.value
			},
			search:function(){
				uni.navigateTo({
					url: '/pages/goods/goodsearch?keyword='+this.keyword
				});
			},
			rightClick: function () {
				uni.navigateTo({
					url: '../score/siteinfo'
				})
			},
			topage(item,index){
				if(item.tab){
					uni.switchTab({
						url: item.tab
					});
				}else{
					uni.navigateTo({
						url: item.to
					});
				}
				
			},
			togoodinfo(pid){
				uni.navigateTo({
					url: '/pages/goodinfo/goodinfo?id='+pid
				});
			},
			toannouncementinfo(id){
				uni.navigateTo({
					url: '/pages/announcement/detail?id='+id
				});
			},
			getMyCarts() {
				uni.request({
					url: request.common.baseUrl+'/api/cart/myCarts',
					data: {
						page: 1,
						token:uni.getStorageSync('keyToken')
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code == 200){
							this.carts = res.data.data
						}else{
							this.carts = []
						}
						if(this.carts.length){
							uni.setTabBarBadge({
							  index: 2,
							  text: JSON.stringify(this.carts.length),
							})
						}else{
							uni.removeTabBarBadge({
								index: 2,
							})
						}
					}
				})
			},
			changegoods(){
				this.page=this.page+1
				uni.request({
				    url: request.common.baseUrl+'/api/index/productFlag',
				    data: {
						page:this.page
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
				        if(res.data.code==200){
							this.goods=res.data.data
						}else{
							this.page=0
							this.changegoods()
						}
				    }
				});
			},
			// addcar(index){
			// 	let params='';
			// 	for (var j = 0; j < this.goods[index].attrarrs.length; j++) {
			// 		params=params+this.goods[index].attrarrs[j].attrval+';';
			// 	}
			// 	uni.request({
			// 		url: request.common.baseUrl+'/api/cart/wcartIn',
			// 		data: {
			// 			openid:uni.getStorageSync('keyOpenid'),
			// 			product_id:this.goods[index].id,
			// 			buy_num:1,
			// 			params:params
			// 		},
			// 		header: {
			// 			'Content-Type':'application/json;charset=UTF-8',
			// 			'Content-Type':'application/x-www-form-urlencoded'
			// 		},
			// 		success: (res) => {
			// 			if(res.data.code==200){
			// 				uni.showToast({
			// 				    title: '添加购物车成功',
			// 					icon: 'success',
			// 				    duration: 2000
			// 				});
			// 			}else{
			// 				uni.showToast({
			// 				    title: res.data.msg,
			// 				    duration: 2000
			// 				});
			// 			}
			// 		}
			// 	});
			// }
		}
	}
</script>

<style>
	.head{
		background-color:#1564e5;
	}
	.header-wrap {
		background-color:#1564e5;
		width: 750upx;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.index-header {
		width:700upx;
		height:92upx;
		margin: auto 25upx;
		color: #ffffff;
		/* display: flex;
		align-items: center;
		justify-content: space-between; */
	}
	.address {
		width:240upx;
		height:92upx;
		line-height:92upx;
		float:left;
	}
	.curposition_icon{
		width:40upx;
		height:92upx;
		line-height:92upx;
		font-size: 24upx;
		float:left;
	}
	.curposition{
		width:200upx;
		height:92upx;
		float:left;
		font-size:24upx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
			
	.input-wrap {
		float: left;
		width: 690upx;
		height: 70upx;
		margin: 0 30upx 16upx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 35upx;
		color: #333333;
		position: relative;
	
	}
	
	.input-wrap input {
		width: 100%;
		float: left;
		height: 70upx;
		line-height: 70upx;
		color: #666666;
		font-size: 20upx;
		text-indent: 20upx;
	}
	
	.input-wrap text {
		position: absolute;
		float: right;
		height: 70upx;
		line-height: 70upx;
		color: #cccccc;
		font-size: 32upx;
		right: 20upx;
	}
	.uni-input-placeholder{
		color:#cccccc;
	}
			
	.map-wrap {
		float:right;
		line-height:92upx;
		font-size:46upx !important;
	}
	.blank {
		background-color:#317bf2;
		height: 92upx;
	}
	@font-face {
	  font-family: 'iconfont';
	  src: url('@/static/font/iconfont.eot');
	  src: url('@/static/font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('@/static/font/iconfont.woff2') format('woff2'),
		  url('@/static/font/iconfont.woff') format('woff'),
		  url('@/static/font/iconfont.ttf') format('truetype'),
		  url('@/static/font/iconfont.svg#iconfont') format('svg');
	}
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 34upx;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.bgbule{
		height: 395upx;
		width: 750upx;
	/* 	background: url("~@/static/bulecolor.jpg") no-repeat  left top 100% ; */
		background-image: url("~@/static/bulecolor.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		
	}
</style>
